<style>       
  @import './../css/goodsDetails.css';
</style>
<template>
  <div>
    <div class='goodsDetails'>
      <p class="chooses" v-on:click='onMethod()'>请选择规格<span><icon class="more_icon" name="evenMore" scale="10"></icon></span></p>
      <div class="shade"></div>
      <!-- vux中的插件 -->
      <sticky class='sticky'>
        <tab active-color="#f8584f" :line-width=0 class="stickNavWrap">
          <div v-on:click='imgDetail()'><tab-item class='image_text' v-bind:selected="selected">图文详情</tab-item></div>
          <div v-on:click='shopDetail()'><tab-item class='merchandise_news' v-bind:selected="!selected">商品信息</tab-item></div>
        </tab>
      </sticky>
      <div id="main">
        <p class="stickNavWrap_item">图文详情</p>
        <!-- 模特展示 -->
        <div v-if='secondData && secondData.images && secondData.images[2] && secondData.images[2].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/mtzs_wap.png" alt=""></div>
         <ul class="sixPhoto" v-if='secondData && secondData.images && secondData.images[2] && secondData.images[2].length'>
          <li v-for='datas in secondData.images[2]'>
            <!-- 图片懒加载 -->
            <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>
          </li>
        </ul>
        <!-- 细节展示 -->
        <div v-if='secondData && secondData.images && secondData.images[4] && secondData.images[4].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/xjzs_wap.png" alt=""></div>
         <ul class="ninePhoto" v-if='secondData && secondData.images && secondData.images[4] && secondData.images[4].length'>
          <li v-for='datas in secondData.images[4]'>
            <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>
          </li>
        </ul>
        <!-- 颜色选择 -->
        <div v-if='secondData && secondData.images && secondData.images[3] && secondData.images[3].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/ysxz_wap.png" alt=""></div>
        <ul class="threePhoto" v-if='secondData && secondData.images && secondData.images[3] && secondData.images[3].length'>
          <li v-for='datas in secondData.images[3]'>
            <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>    
            <p>{{datas.colorName}}</p>
          </li>
        </ul>
        <!-- 尺码规格 -->
        <div v-if='secondData && secondData.sizeTable && secondData.sizeTable.length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/cmgg_wap.png" alt=""></div>
        <table class="sizeTable" v-if='secondData && secondData.sizeTable && secondData.sizeTable.length'>
          <!-- 循环七条大数据里的第0项(也可以使任意一项)，目的是拿到18条元素的下标 -->
          <tr v-for='(datas,index) in secondData.sizeTable[0]'>
            <!-- 再循环七条大数据，{{datasss[index]}}是依次展示每条数据里的18条元素 -->
           <td v-for='datasss in secondData.sizeTable'>{{datasss[index]}}</td>
          </tr>
        </table>
        <!-- 测试方法 -->
        <div v-if='secondData && secondData.sizePicture && secondData.sizePicture != ""'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/clff_wap.png" alt=""></div>
        <p v-if='secondData && secondData.sizePicture && secondData.sizePicture != ""'>
          <x-img v-bind:src='"http://pic1.banggo.com" + secondData.sizePicture' class="ximg-demo" error-class="ximg-error" :offset="-100"></x-img>       
        </p>
        <!-- 商品信息 -->
        <div id="detailTab"><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/spxx_wap.png" alt=""></div>
        <ul class="goodsMessage">
          <li v-if='secondData && secondData.brandName'><strong>品牌：</strong>{{secondData.brandName}}</li>
          <li v-if='secondData && secondData.productName'><strong>款名：</strong>{{secondData.productName}}</li>
          <li v-if='secondData && secondData.productSysCode'><strong>款号：</strong>{{secondData.productSysCode}}</li>
          <li v-if='secondData && secondData.categories && secondData.categories.categoryName'><strong>分类：</strong>{{secondData.categories.categoryName}}</li>
          <li v-if='secondData && secondData.marketPrice'><strong>吊牌价：</strong>{{secondData.marketPrice}}</li>
        </ul>
        <ul class="goodsAttrs" v-if='secondData && secondData.goodsAttrs'>
          <li v-for='datas in secondData.goodsAttrs'><strong>{{datas.attrName}}：</strong>{{datas.attrValue[0]}}</li>
        </ul>
        <!-- 品牌介绍 -->
        <div v-if='secondData && secondData.brandInfo' class='brandIntroduction'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/ppjs_wap.png" alt=""></div>
        <p class='introduce'>{{secondData.brandInfo}}</p>
        <!-- 编辑推荐 -->
        <div v-if='secondData && secondData.salePoint'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/bjtj_wap.png" alt=""></div>
        <p class="recommend">{{secondData.salePoint}}</p>
      </div>
      <!-- 页面内的隐藏内容区域 tax_detail这个类在源码里设置了display:none --> 
<!--<div class="wap_mask tax_detail" style="display:none;">
        <div class="wap_overlay_wrap">
          <h6>税费详情</h6>
          <ul>
            <li v-if='data && data.taxRate'>1.该商品需缴纳{{data.taxRate}}*100的跨境电商综合税。</li>
            <li>2.跨境电商综合税需按一般贸易增值税及消费税税额的70%征收，新美力全球购代征代缴，税费以结算页金额为准。</li>
            <li>3.财政部，海关总署，国家税务总局发布跨境电子商务零售进口税收政策，自2016年4月8日起，跨境电商单次交易限值为人民币2000元，个人年度交易限值为人民币20000元。</li>
          </ul>
          <div class="Overlay_bottom">
            <button>确定</button>
          </div>
          <div class="white">&nbsp;&nbsp;</div>
        </div>
      </div> -->
      <div class="hidden_area">
        <input id="goods_sn" type='hidden' v-bind:value="data.productSysCode" />
        <input id="channel_code" type='hidden' v-bind:value="data.channelCode" />
      </div>
    </div>
  </div>
</template>
<script>
  import {TransferDom, Popup, Group, Cell ,XHeader, XInput, XButton, Box, Sticky, TabItem, Tab, XImg } from 'vux'
  export default {
    name: 'goodsDetails',    
    components: {
      XImg,
      TransferDom,
      Popup,
      Group,
      Cell,
      XHeader,
      XInput,
      XButton,
      Box, 
      Sticky,
      TabItem,
      Tab,
    },
    data () {
      return {
          isActive: true,
          //弹窗规格的初始值  
          popActiveGuiGe: null,
          //弹窗规格的初始值
          popActiveColor: null,
          scroll: '',
          selected: true,
          show: false,
          info: "",
          data: {},
          secondData: {},
      }
    },
    methods: {
      // 组件通信子组件调用父组件的函数
      onMethod() {
        //如果有库存，才会触发弹窗效果
        if(this.data.stockNum) {
          // emit 触发父元素的函数
          this.$emit("componentCommunication"); 
        }
      },
      //点击图文详情
      imgDetail() {
        document.body.scrollTop = 570;
      },
      //点击商品信息
      shopDetail() {
        document.body.scrollTop = 8700;
      },
    },
    mounted: function() {
      window.addEventListener('scroll', this.menu);
      //子组件中的ajax通过组件通信的方式引用
      this.data = this.$attrs.getProductInfoUrlAjax;
      //子组件中的ajax通过组件通信的方式引用
      this.secondData = this.$attrs.getDescriptionUrlAjax;
    },
    beforeUpdate() {
      //子组件中的ajax通过组件通信的方式引用
      this.data = this.$attrs.getProductInfoUrlAjax;
      //子组件中的ajax通过组件通信的方式引用
      this.secondData = this.$attrs.getDescriptionUrlAjax;
    }
  }
</script>


